<script>
// 引入mapState用于生成对应的代码，方便获取到对应的值，替换计算属性里面重复代码片段
import {mapGetters, mapState} from "vuex";

export default {
  name: 'Count',
  data: function () {
    return {
      num: 1, // 用户选择的数字
      // sum: 0 // 当前的和
    }
  },
  methods: {
    // 【vuex的工作流程：vc组件，代表顾客，使用dispatch ===> action代表服务员，使用commit  ==> mutations代表厨师】
    increment() {
      // 使用dispatch，其中dispatch代表的就是服务员，而vc组件代表的就是顾客。
      // this.$store.dispatch('increment', this.num);
      this.$store.commit('INCREMENT', this.num);
    },
    decrement() {
      // 使用dispatch，其中dispatch代表的就是服务员，而vc组件代表的就是顾客。
      // this.$store.dispatch('decrement', this.num);
      this.$store.commit('DECREMENT', this.num);
    },
    incrementOdd() {
      // 使用dispatch，其中dispatch代表的就是服务员，而vc组件代表的就是顾客。
      this.$store.dispatch('incrementOdd', this.num);
    },
    incrementWait() {
      // setTimeout(() => {
      //   // 使用dispatch，其中dispatch代表的就是服务员，而vc组件代表的就是顾客。
      //   this.$store.dispatch('incrementWait', this.num);
      // }, 500);
      this.$store.dispatch('incrementWait', this.num);
    }
  },
  computed: {
    // // 【靠程序员自己亲自去写计算属性】
    // // 使用计算属性获取到对应的值，方便页面直接使用插值语法获取最终的数据
    // sum() {
    //   return this.$store.state.sum;
    // },
    // school() {
    //   return this.$store.state.school;
    // },
    // subject() {
    //   return this.$store.state.subject;
    // },
    // bigSum() {
    //   return this.$store.getters.bigSum;
    // },

    // // 可以使用mapState自动生成代码片段的方式，替换上述的计算属性写法
    // ...mapState({
    //   'sum': 'sum',
    //   'school': 'school',
    //   'subject': 'subject',
    // }),

    // // 可以使用mapState自动生成代码片段的方式，替换上述的计算属性写法【其中key的单引号可以省略，方便书写】
    // // 【借助mapState生成计算属性，从state中读取数据，对象写法】
    // ...mapState({
    //   sum: 'sum',
    //   school: 'school',
    //   subject: 'subject',
    // }),

    // 【借助mapState生成计算属性，从state中读取数据，数组写法】
    ...mapState([
      'sum',
      'school',
      'subject',
    ]),

    // // 可以使用mapGetters自动生成代码片段的方式，替换上述的计算属性写法【其中key的单引号可以省略，方便书写】
    // 【借助 mapGetters 生成计算属性，从 getters 中读取数据，对象写法】
    // ...mapGetters({
    //   bigSum: 'bigSum',
    // }),
    // 【借助 mapGetters 生成计算属性，从 getters 中读取数据，数组写法】
    ...mapGetters(['bigSum',
    ])
  }
}
</script>

<template>
  <div>
    <h1>当前求和：{{ sum }}</h1>
    <h3>当前求和放大10倍：{{ sum * 10 }}</h3>
    <h3>当前求和放大10倍：{{ bigSum }}</h3>
    <h3>我在 {{ school }}，学习{{ subject }}</h3>
    <select v-model.number="num">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementOdd">当前求和为奇数再加+1</button>
    <button @click="incrementWait">等待500毫秒+1</button>
  </div>
</template>

<style scoped>
button {
  margin-left: 5px;
}
</style>